<!DOCTYPE html>
<html>
<head>
	<title>商户列表</title>
	<!--#include("../common/common-link.html"){}-->
	<script src="${ctx}/assets/js/fileupload.js"></script>
	<style type="text/css">
		.layui-form-switch{margin-top: 0;}
		.table-panel .content table{margin: 0 auto;margin-top: 10px;}
		.table-panel .content table tr{height: 49px;}
		.table-panel .content table tr.btns td .btn{width: 123px;outline: none;margin-top:20px;}
		.table-panel .content table tr td .need{color: red;}
		.table-panel .content table tr td.left{text-align: right;}
		.table-panel .content table tr td.right{text-align: left;}
		.table-panel .content table tr td.right .form-control{width:330px;}
		.table-panel .content table tr td.center{text-align: center;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">添加商户</h4>
				<div class="btns-group">
					<input type="button" class="btn btn-primary" onclick="javascript:window.history.back()" value="返回"/>
				</div>
			</div>
			<div class="content">
				<table>
					<tr>
						<td class="left">商户名<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.name" v-model="form.name">
						</td>
					</tr>
					<tr>
						<td class="left">商户简称<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.shortName" v-model="form.shortName">
						</td>
					</tr>
					<tr>
						<td class="left">手机号<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.phone" v-model="form.phone">
						</td>
					</tr>
					<tr>
						<td class="left">邮箱<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" placeholder="商户登录账号" :value="form.email" v-model="form.email">
						</td>
					</tr>
					<tr>
						<td class="left">地址<label class="need">*</label>：</td>
						<td class="right">
							<input class="form-control" :value="form.address" v-model="form.address">
						</td>
					</tr>
					<tr>
						<td class="left">微信商户号：</td>
						<td class="right">
							<input class="form-control" :value="form.mchId" v-model="form.mchId">
						</td>
					</tr>
					<tr>
						<td class="left">支付宝商户PID：</td>
						<td class="right">
							<input class="form-control" :value="form.mchUserId" v-model="form.mchUserId">
						</td>
					</tr>
					<tr>
						<td class="left">初始密码：</td>
						<td class="right">
							<input type="password" class="form-control" placeholder="默认初始化密码为123456" :value="form.password" v-model="form.password">
						</td>
					</tr>
					<tr>
						<td class="left">确认密码：</td>
						<td class="right">
							<input type="password" class="form-control" :value="form.confirmPassword" v-model="form.confirmPassword">
						</td>
					</tr>
					<tr>
						<td class="left">状态：</td>
						<td class="right">
							<div class="layui-form" v-if="form.status">
								<div id="switch" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>活动</em><i></i></div>
							</div>
							<div class="layui-form" v-else>
								<div id="switch" class="layui-unselect layui-form-switch" lay-skin="_switch"><em>冻结</em><i></i></div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="left" valign="bottom">购买时长<label class="need">*</label>：</td>
						<td class="right" valign="bottom">
							<div class="btn-group btn-group-sm">
								<button type="button" :class="'btn btn-'+recharge.clazz" @click="refill(i)" v-for="(recharge,i) in recharges">{{recharge.name}}</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="left">logo<label class="need">*</label>：</td>
						<td class="right">
							<button type="button" class="layui-btn upload-btn" style="display: inline-block;">
						    	<i class="layui-icon">&#xe67c;</i>上传图片(64x64)
							</button>
							<span style="display: inline-block;">{{logoName}}</span>
							<input class="layui-upload-file upload-file" type="file" @change="fileChange($event)" style="display: none">
						</td>
					</tr>
					<tr class="btns">
						<td class="center" colspan="2">
							<input type="button" class="btn button ok_btn" value="确定" @click="submit"/>
							<input type="button" class="btn button cancel_btn" value="取消" @click="cancel"/>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="hidden" style="display: none">
			<input type="file" class="uploader"/>
		</div>
	</div>
</body>
<script type="text/javascript">
	var params={};
	var data = {};
	var form={};
	var recharges;
	function initVue() {
		form.phone="";
		form.name="";
		form.shortName="";
		form.password="";
		form.confirmPassword="";
		form.email="";
		form.mchId="";
		form.mchUserId="";
		form.address="";
		form.status=1;
		form.expireMonth="";
		form.logo="";
		data.form = form;
		data.logoName="";
		initRecharges();
		new Vue({
			el:"#container-wrap",
			data:data
		});
		Vue.nextTick(function() {
			bindEvent();
			initUploader();
			$("#container-wrap").show();
		});
		
	};
	function bindEvent(){
		$("#switch").click(processSwitch);
		$(".upload-btn").click(function(){
			$(".upload-file").click();
		});
	};
	function submit(){
		if($.trim(form.name)==''){
			util.warning("请填写商户名！");
			return ;
		}
		if($.trim(form.shortName)==''){
			util.warning("请填写商户简称！");
			return ;
		}
		if($.trim(form.phone)==''){
			util.warning("请填写商户手机号！");
			return ;
		}else{
			if(!util.checkPhone(form.phone)){
				util.warning("不合法的手机号！");
				return ;
			}
		}
		if($.trim(form.email)==''){
			util.warning("请填写商户邮箱！");
			return ;
		}else{
			if(!util.checkEmail(form.email)){
				util.warning("不合法的邮箱！");
				return ;
			}
		}
		if($.trim(form.mchId)==''&&$.trim(form.mchUserId)==''){
			util.warning("微信商户号和支付宝PID不能同时为空！");
			return ;
		}
		if($.trim(form.password)!=''){
			if(form.password.length<6){
				util.warning("密码应大于6位！");
				return ;
			}
		}
		if(form.confirmPassword!=form.password){
			util.warning("两次密码输入不一致！");
			return ;
		}else{
			form.confirmPassword="";
		}
		if($.trim(form.address)==''){
			util.warning("请填写商户地址！");
			return ;
		}
		if($.trim(data.logoName)==''){
			util.warning("请选择商户logo！");
			return ;
		}
		var load_id = util.load();
		loadId = util.load();
		var _data={};
		_data.formData=form;
		_data.files=fileList;
		uploader.submit(_data);
	};
	function refill(i){
		for(var j in recharges){
			var recharge=recharges[j];
			if(j==i){
				recharge.clazz="success";
				form.expireMonth=recharge.value;
			}else{
				recharge.clazz="default";
			}
		}
	}
	function initUploader(){
		fileList=[];
		uploader={};
		uploader.url="add";
		uploader.dataType="json";
		uploader.autoUpload=false;
		uploader.paramName="logo";
		uploader.fail=function(event, data) {
        	layer.close(uploader.loadId);
            util.error("处理失败");
        };
        uploader.done=function(event, _result) {
        	layer.close(uploader.loadId);
            var result = _result.result;
            var status=result.status;
			var code=result.code;
			var errorMsg=result.errorMsg;
			if(status=='success'){
				cancel();
				return ;
			}else{
				util.error(errorMsg);
			}
        };
        $('.uploader').fileupload(uploader);
        uploader.submit=function(form){
        	var formData=util.checkInvalid(form.formData);
        	if(!form.files.length){
        		form.files=[""];
        	};
        	form.formData=formData;
        	uploader.loadId=util.load();
    		$('.uploader').fileupload('send',form);
        }
        return uploader;
	};
	function fileChange(e){
		var $file=$(e.target);
		data.logoName=$file.val();
		fileList.splice(0,fileList.length);
		fileList.push($file.prop('files')[0]);
		if(data.isModify){
			$(".logo-name-img").hide();
			$(".logo-name-span").css({"display":"inline-block"})
		}
	};
	function initRecharges(){
		recharges=[];
		var recharge={};
		recharge.clazz="default";
		recharge.name="1月";
		recharge.value=1;
		recharges.push(recharge);
		recharge={};
		recharge.clazz="default";
		recharge.name="2月";
		recharge.value=2;
		recharges.push(recharge);
		recharge={};
		recharge.clazz="default";
		recharge.name="3月";
		recharge.value=3;
		recharges.push(recharge);
		recharge={};
		recharge.clazz="default";
		recharge.name="半年";
		recharge.value=6;
		recharges.push(recharge);
		recharge={};
		recharge.clazz="success";
		form.expireMonth=12;
		recharge.name="1年";
		recharge.value=12;
		recharges.push(recharge);
		recharge={};
		recharge.clazz="default";
		recharge.name="2年";
		recharge.value=24;
		recharges.push(recharge);
		recharge={};
		recharge.clazz="default";
		recharge.name="3年";
		recharge.value=36;
		recharges.push(recharge);
		data.recharges=recharges;
		return recharges;
	};
	function processSwitch(){
		if(form.status){
			form.status=0;
		}else{
			form.status=1;
		}
		Vue.nextTick(function() {
			$("#switch").click(processSwitch);
		});
	}
	function cancel(){
		window.history.back();
	};
</script>
</html>